<template>
  <div class="box">
    <div class="tit" data-icon="ranking">
      热门业务排行
      <div class="bottom-line"></div>
    </div>
    <div class="boxnav" style="height: 250px;">
      <div style="height: 200px; float: left; width: 40%; padding: 0 5px;">
        <div class="tit02 text-b">业务热度榜</div>
        <div class="huati">
          <ul>
            <li v-for="item in businessRanking" :key="item.id">
              {{ item.rank }}.{{ item.name }}  
              <span :class="item.trend === 'up' ? 'text-s' : 'text-d'">
                {{ item.trend === 'up' ? '↑' : '↓' }}{{ item.value }}
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div style="height: 200px; float: left; width: 60%">
        <div class="text-b tit02" style="text-align: center;">关键词 — 农商银行</div>
        <div class="tagcloud" ref="tagcloudContainer">
          <a class="b01 co01" href="#">普惠金融</a>
          <a class="b02 co02" href="#">智慧银行</a>
          <a class="b03 co05" href="#">风险管控</a>
          <a class="b04 co02" href="#">数字化</a>
          <a class="b03 co05" href="#">服务三农</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const businessRanking = ref([
  { id: 1, rank: 1, name: '存款理财', value: 3520, trend: 'up' },
  { id: 2, rank: 2, name: '企业贷款', value: 2890, trend: 'up' },
  { id: 3, rank: 3, name: '个人贷款', value: 1567, trend: 'down' },
  { id: 4, rank: 4, name: '信用卡', value: 1234, trend: 'down' },
  { id: 5, rank: 5, name: '手机银行', value: 980, trend: 'down' }
])

const tagcloudContainer = ref(null)

onMounted(() => {
  // 这里可以初始化3D标签云，如果需要的话
  // 由于原来的tagcloud函数依赖外部库，这里暂时省略
})
</script>
